<template>
  <div class="page_notice" id="notice_list">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="car_notice">
              <div class="notice_list">
                <h4>公告列表</h4>
                <router-link
                  class="notice_block"
                  v-for="(o, i) in list"
                  :key="i"
                  :to="'/notice/details?' + 'notice_id' + '=' + o.notice_id"
                >
                  <div class="notice_title ellipsis_2">
                    {{ o.title }}
                  </div>
                  <div class="notice_create_time">
                    {{ o.create_time }}
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col overflow-auto flex_cc">
            <b-pagination-nav
              :base-url="$route.path"
              :number-of-pages="count_pages"
              :link-gen="link_gen"
              @change="change_page"
              first-number
              last-number
            ></b-pagination-nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {
      url_get_list: "~/api/notice/get_list",
      list: [],
      query: {
        title: "",
        page: 1,
        size: 5,
      },
      // 页面数
      count_pages: 1,
    };
  },
  methods: {
    get_list_after(json) {
      this.count_pages = Math.ceil(json.result.count / this.query.size);
    },
    link_gen(page_num) {
      return {
        query: {
          page: page_num,
        },
      };
    },
    change_page(page_num) {
      this.query.page = page_num;
      this.get_list();
    },
  },
};
</script>

<style scoped>
.flex_cc{
  display: flex;
  justify-content: center;
  align-items: center;
}
.ellipsis_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.container {
  min-height: 600px;
}
.notice_block {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 5px;
}
.notice_title {
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
